<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>扫码次数统计</title>
<script src="${ctx}/assert/js/echarts-all.js"></script>
<script src="${ctx}/decorators/js/plugins/layer/laydate/laydate.js"></script>
<script type="text/javascript">
	$(function() {
		//外部js调用
 		laydate({
			//elem : '#startDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			event : 'focus' //响应事件。如果没有传入event，则按照默认的click
		}); 
		//日期范围限制
		var start = {
			elem : '#startDate',
			format : 'YYYY-MM-DD',
			min : '2015-6-1', //设定最小日期为当前日期
			max : laydate.now(), //设定最大日期为当前日期
			istime : false,
			istoday : true,
			choose : function(datas) {
				end.min = datas; //开始日选好后，重置结束日的最小日期
				end.start = datas; //将结束日的初始值设定为开始日
			}
		};
		var end = {
			elem : '#endDate',
			format : 'YYYY-MM-DD',
			max : laydate.now(),//设定最大日期为当前日期
			istime : false,
			istoday : true,
			choose : function(datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
			}
		};
		laydate(start);
		laydate(end);
	});
	
	function changeProduct(){
		$("button").attr('disabled', false);
		var vendorName = $("#vendorNameList option:selected").text();
		$.ajax({
			url: "productSearch",
			data: {vendorName:vendorName},
			type: "POST",
			dataType:'json', 
			success: function(data){
				if(data.length == 0){
					$('#alertModal').modal('show')
					document.getElementById("alertMessage").innerHTML = "该厂商未添加产品信息 ";
					document.getElementById("button").disabled = true;
				}
				var item = ""; 
				$.each(data,function(i,result){ 
					item  += '<option value="'+result['id']+'">'+result['p_name']+'</option>';
				}); 
				var div = document.getElementById('productNameList');
				div.innerHTML = item;
			}
		});
	}
</script>
</head>
<body>
	<div class="row">
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5>二维码扫码统计</h5>
			</div>
			<div class="ibox-content" style="height: 80px">
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-lg-1 control-label lg"><b>公司名称：</b></label>
						<div class="col-lg-2">
							<select class="form-control" name="vendorNameList"
								onchange="changeProduct();" id="vendorNameList">
								<c:forEach var="vendor" items="${vendorList}"
									varStatus="status">
									<option value="${vendor.id}">${vendor.vName}</option>
								</c:forEach>
							</select>
						</div>
						 
						<label class="col-lg-1 control-label lg"><b>产品名称：</b></label>
						<div class="col-lg-2">
							<select class="form-control" name="productNameList"
								 id="productNameList">
								
							</select>
						</div>
						<!--  
						<label class="col-lg-1 control-label lg">时间段：</label>
						<div class="col-sm-3">
							<input id="startDate" class="laydate-icon form-control layer-date" placeholder="开始日期">
						</div>
						<div class="col-sm-3">
							<input class="laydate-icon form-control layer-date" id="endDate" placeholder="结束日期">
						</div>
						-->
						<button class="btn btn-success"
							onclick="selectChart();return false;">确定</button>
					</div>
				</form>
			</div>
		</div>
		<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>统计图</h5>
							</div>
							<div class="ibox-content" style="height: 400px;">
								<div class="flot-chart-content" id="flot-dashboard-chart">柱状图区域</div>
							</div>
						</div>
					</div>
				</div>
				</div>
	</div>
	
	<!-- Modal -->
	<div class="modal fade" id="alertModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertMessage"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" data-dismiss="modal" class="btn btn-primary">确定</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			changeProduct();
			selectChart();
		});
		function selectChart() {
			var id = $("#vendorNameList option:selected").val();
			var startDate = $("#startDate").val();
			var endDate = $("#endDate").val();
			changeChart(id, startDate, endDate);
		}
		function changeChart(id, startDate, endDate) {
			var Chart = echarts.init(document
					.getElementById("flot-dashboard-chart"));
			Chart.showLoading({
				text : '正在努力的读取数据中...'
			});
			$.ajax({
				type : "post",
				url : "qrcodeECharts",
				data : {
					id : id,
					startDate : startDate,
					endDate : endDate
				},
				dataType : "json",
				success : function(data) {
					Chart.hideLoading();
					Chart.setOption(data);
				}
			});
		}
	</script>
</body>

</html>